<template>
  <div class="load-mask" :class="{fixed:fixed}" :style="`background-color:${bgColor};`">
    <van-loading :type="type" :color="color" :size="size" :text-size="textSize" :vertical="vertical">
      <slot></slot>
    </van-loading>
  </div>
</template>
<script>
import { Loading } from 'vant'

export default {
  components:{
    [Loading.name]: Loading
  },
  props: {
    size: {
      default: 30
    },
    color: {
      type: String,
      default: '#c9c9c9'
    },
    type: {
      type: String,
      default: 'circular'
    },
    textSize: {
      default: 14
    },
    vertical: {
      type: Boolean,
      default: false
    },
    bgColor: {
      type: String,
      default: 'transparent'
    },
    fixed: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="less" scoped>
.load-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  z-index: 1;
  &.fixed {
    position: fixed;
  }
  .van-loading {
    margin-left: auto;
    margin-right: auto;
  }
}
</style>
<style>
.loading-parent--relative {position: relative!important;}
</style>
